<template>
      <!-- 视频混剪头部 start -->
      <div class="smart-clip-header">
        <div class="smart-clip-header-title_top">{{props.config.title}}</div>
        <div class="smart-clip-header-desc">
          {{props.config.dec}}
        </div>
        <div class="smart-clip-header-btngroup">
            <template v-for="item in props.btnList" :key="item.text">
                <a-tooltip v-if="false" placement="topLeft">
                  <template #title>
                    <span>套餐不支持该权限</span>
                  </template>
                  <a-button type="primary" :disabled="!clipRole.includes('sphj')"
                    style="border: none; border-radius: 6px; margin-right: 20px"><PlusOutlined
                      :style="{ fontSize: '12px' }" />{{item?.text}}</a-button>
                </a-tooltip>

                <a-button  @click="btnClick(item)" type="primary"
                  style="border: none; border-radius: 6px; margin-right: 20px"><PlusOutlined
                    :style="{ fontSize: '12px' }" />{{item?.text}}</a-button>

            </template>
        </div>
      </div>
      <!-- 视频混剪头部 end -->
</template>

<script setup>
import { computed } from "vue";
import {
  PlusOutlined,
} from "@ant-design/icons-vue";
import { useStore } from "vuex";
const store = useStore();

const emit = defineEmits('btnClick:item')

const props = defineProps({
    /**
     * @param {
        [{
            * text:'', // 按钮文本
            * type:'primary',  // 按钮类型
            * role:'' // 按钮鉴权key
        }]
     * }
     */
    btnList: {
        type: Array,
        default: () => []
    },
    config: {
        type: Object,
        default: () => ({
            title: '',
            dec:''
        })
    }
})
// 权限数据
const clipRole = computed(() => store.state.user?.clipRole || [])


// 通知父组件 点击的是哪个按钮
const btnClick = (item) => {
    emit('btnClick', item)
}

</script>

<style lang="less" scoped>
.smart-clip-header {
  padding: 30px 30px 0;
  border-radius: 12px;
  height: 180px;
  min-width: 1140px;
  // margin-top: 20px;
  background: linear-gradient(220deg, #f3f7ff, rgba(159, 191, 255, 0.4));
  display: flex;
  flex-direction: column;

  .smart-clip-header-title_top {
    font-size: 24px;
    color: #0c0d0e;
    line-height: 1.5;
  }

  .smart-clip-header-desc {
    font-size: 14px;
    color: #737a87;
    margin-top: 5px;
    line-height: 1.5;
  }

  .smart-clip-header-btngroup {
    margin-top: 15px;
  }
}
</style>